<template>
  <div>
    <!-- video -->
    <div v-show="showMV" class="video">
      <video src="" controls ref="video" v-on:ended="endedPlay"></video>
      <span v-on:click="stopPlay">关闭</span>
    </div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>MV视频管理</el-breadcrumb-item>
      <el-breadcrumb-item>MV视频列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-button type="primary" icon="el-icon-plus" style="margin-bottom: 20px" @click="addMv">添加MV</el-button>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="MV名称" width="210">
          <template slot-scope="scope">
            <span>{{ scope.row.mv_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="MV图片" width="200">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px" :src="'http://localhost:3001/'+scope.row.mv_pic_url" fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="歌手名称" width="230">
          <template slot-scope="scope">
            <span>{{ scope.row.singer_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
            <el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope.row.mvid)"></el-button>
            <el-button size="mini" icon="el-icon-video-play"  type="success" @click="handlePlay(scope.row,scope.$index)">{{scope.$index==playIndex?'暂停':'播放'}}</el-button>
            <el-button size="mini" icon="el-icon-setting" type="primary" @click="handleComment(scope.row.mvid)">评论管理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 评论管理的表格 -->
    <el-dialog title="评论管理" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="user_nickname" label="用户名称" width="130"></el-table-column>
        <el-table-column property="comment_content" label="评论" width="450"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDeleteComment(scope.row.commentid)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 修改mv的表单 -->
    <!-- id name mvurl mvfile picfile singerId -->
    <el-dialog title="编辑MV" :visible.sync="dialogFormVisibleEditMV">
      <el-form :model="form" ref="ruleForm" :rules="rules">
        <el-form-item label="MV名称" label-width='100px' prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="歌手名称" label-width='100px' prop="singerId">
          <el-select v-if="SingerOptions.length!==0" filterable v-model="form.singerId" placeholder="请选择">
            <el-option v-for="item in SingerOptions" :key="item.singerid" :label="item.singer_name" :value="item.singerid">
            </el-option>
          </el-select>
          <span v-else style="text-decoration:underline;color:#409eff;cursor:pointer;" v-on:click="$router.push('/singerlist')">请先添加歌手！</span>
        </el-form-item>
        <el-alert title="MV地址和MV文件任选其一填写即可~~~" close-text="我知道了" type="warning" style="margin-bottom: 20px"></el-alert>
        <el-form-item label="MV地址" label-width='100px'>
          <el-input v-model="form.mvurl" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="MV文件" label-width='100px'>
          <el-upload class="upload-demo" :file-list="fileList" :auto-upload="false" :on-change='handleFileChange' :multiple="false" drag action="#" accept="video/*">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
        <el-form-item label="MV图片" label-width='100px'>
          <el-upload class="avatar-uploader" :auto-upload="false" action="#" accept="image/*" :multiple="false" :on-change="handleImageChange" :show-file-list="false">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </div>
    </el-dialog>
    <!-- 添加mv的表单 -->
    <!-- name mvurl mvfile picfile singerId -->
    <el-dialog title="添加MV" :visible.sync="dialogFormVisibleAddMV">
      <el-form :model="addForm" ref="ruleForm1" :rules="addMvRules">
        <el-form-item label="MV名称" label-width='100px' prop="name">
          <el-input v-model="addForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="歌手名称" label-width='100px' prop="singerId">
          <el-select v-if="SingerOptions.length!==0" filterable v-model="addForm.singerId" placeholder="请选择">
            <el-option v-for="item in SingerOptions" :key="item.singerid" :label="item.singer_name" :value="item.singerid">
            </el-option>
          </el-select>
          <span v-else style="text-decoration:underline;color:#409eff;cursor:pointer;" v-on:click="$router.push('/singerlist')">请先添加歌手！</span>
        </el-form-item>
        <el-alert title="MV地址和MV文件任选其一填写即可~~~" close-text="我知道了" type="warning" style="margin-bottom: 20px"></el-alert>
        <el-form-item label="MV地址" label-width='100px'>
          <el-input v-model="addForm.mvurl" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="MV文件" label-width='100px'>
          <el-upload class="upload-demo" :file-list="addMvFileList" :auto-upload="false" :on-change='handleFileChangeAddMv' :multiple="false" drag action="#" accept="video/*">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
        <el-form-item label="MV图片" label-width='100px' prop="picfile">
          <el-upload class="avatar-uploader" :auto-upload="false" action="#" accept="image/*" :multiple="false" :on-change="handleImageChangeAddMv" :show-file-list="false">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormAddMv('ruleForm1')">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMVList,
  deleteMV,
  getComment,
  deleteComment,
  getSinger,
  editMV,
  addMV
} from '../../utils/api'
export default {
  data () {
    return {
      // mv表格数据
      tableData: [],
      // 正在播放的索引
      playIndex: 0,
      // 控制是否显示视频界面
      showMV: false,
      // 评论管理表格数据
      gridData: [],
      // 控制评论管理表格的显示
      dialogTableVisible: false,
      // mv修改的表单
      // id name mvurl mvfile picfile singerId
      form: {
        name: '',
        singerId: '',
        mvurl: '',
        id: 0,
        mvfile: null,
        picfile: null
      },
      // mv添加的表单
      // name mvurl mvfile picfile singerId
      addForm: {
        name: '',
        singerId: '',
        mvurl: '',
        mvfile: null,
        picfile: null
      },
      // mv修改表单的校验
      rules: {
        name: [
          { required: true, message: '请输入MV名称', trigger: 'blur' },
        ],
        singerId: [
          { required: true, message: '请选择歌手名称', trigger: 'change' }
        ]
      },
      // mv添加表单的校验
      addMvRules: {
        name: [
          { required: true, message: '请输入MV名称', trigger: 'blur' },
        ],
        singerId: [
          { required: true, message: '请选择歌手名称', trigger: 'change' }
        ],
        picfile: [
          { required: true, message: '请选择歌手图片', trigger: 'change' }
        ]
      },
      // singer数组
      SingerOptions: [],
      imageUrl: '',
      // 修改mv上传文件数组
      fileList: [],
      // 添加mv上传文件数组
      addMvFileList: [],
      // 控制修改mv表单的显示
      dialogFormVisibleEditMV: false,
      // 控制添加mv表单的显示
      dialogFormVisibleAddMV: false
    }
  },
  created () {
    // 获取mv
    this.getMVL();
  },
  methods: {
    // 编辑mv 准备数据
    handleEdit (scope) {
      // id name mvurl mvfile picfile singerId
      this.form.id = scope.mvid;
      this.form.name = scope.mv_name;
      this.form.singerId = scope.singer_id;
      this.getSingerL();
      this.dialogFormVisibleEditMV = true;
    },
    // 修改MV
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.dialogFormVisibleEditMV = false;
          // id name mvurl mvfile picfile singerId
          var formData = new FormData();
          formData.append('id', this.form.id);
          formData.append('name', this.form.name);
          formData.append('singerId', this.form.singerId);
          formData.append('mvurl', this.form.mvurl);
          formData.append('picfile', this.form.picfile);
          formData.append('mvfile', this.form.mvfile);
          let res = await editMV(formData);
          if (res.status == 0) {
            this.$message({
              message: '修改MV信息成功！',
              type: 'success'
            });
            this.form.name = '';
            this.form.singerId = '';
            this.form.mvurl = '';
            this.form.id = 0;
            this.form.mvfile = null;
            this.form.picfile = null;
            this.imageUrl = '';
            this.fileList = [];
            this.getMVL();
          } else {
            this.$message.error(res.message);
          }
        }
      });
    },
    // 获取singer 为修改MV和添加MV做准备
    async getSingerL () {
      let res = await getSinger();
      this.SingerOptions = res.data;
    },
    // 修改mv准备上传文件的数据
    handleImageChange (file, filelist) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.picfile = filelist[filelist.length - 1].raw;
    },
    // 修改mv准备上传文件的数据
    handleFileChange (file, filelist) {
      this.fileList = [filelist[filelist.length - 1]];
      this.form.mvfile = filelist[filelist.length - 1].raw;
    },
    // 添加mv准备上传文件的数据
    handleFileChangeAddMv (file, filelist) {
      this.addMvFileList = [filelist[filelist.length - 1]];
      this.addForm.mvfile = filelist[filelist.length - 1].raw;
    },
    // 添加mv准备上传文件的数据
    handleImageChangeAddMv (file, filelist) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.addForm.picfile = filelist[filelist.length - 1].raw;
    },
    // 删除mv
    handleDelete (id) {
      this.$confirm('此操作将永久删除该MV, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await deleteMV(id);
        if (res.status == 0) {
          this.$message({
            message: '删除MV成功！',
            type: 'success'
          });
          this.getMVL();
        } else {
          this.$message.error(res.message);
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 添加mv
    submitFormAddMv (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.dialogFormVisibleAddMV = false;
          // name mvurl mvfile picfile singerId
          var formData = new FormData();
          formData.append('name', this.addForm.name);
          formData.append('singerId', this.addForm.singerId);
          formData.append('mvurl', this.addForm.mvurl);
          formData.append('picfile', this.addForm.picfile);
          formData.append('mvfile', this.addForm.mvfile);
          let res = await addMV(formData);
          if (res.status == 0) {
            this.$message({
              message: '添加MV成功！',
              type: 'success'
            });
            this.addForm.name = '';
            this.addForm.singerId = '';
            this.addForm.mvurl = '';
            this.addForm.mvfile = null;
            this.addForm.picfile = null;
            this.imageUrl = '';
            this.addMvFileList = [];
            this.getMVL();
          } else {
            this.$message.error(res.message);
          }
        }
      });
    },
    // 评论管理
    async handleComment (id) {
      // type(0歌曲 1歌单 2mv) musicid gedanid mvid
      let res = await getComment(2, 'mvid', id);
      if (res.status == 0) {
        this.gridData = res.data;
      }
      this.dialogTableVisible = true;
    },
    // 删除评论
    async handleDeleteComment (id) {
      let res = await deleteComment(id);
      if (res.status == 0) {
        this.$message({
          message: '删除评论成功，请稍后查看！',
          type: 'success'
        });
      } else {
        this.$message.error(res.message);
      }
    },
    // 试看 点击播放按钮
    handlePlay (scope, index) {
      // 查看mv_url或mv_file哪个有值 可以播放
      if (scope.mv_url !== null) {
        // 给video赋值
        this.$refs.video.src = scope.mv_url;
        this.showMV = true;
        // 播放
        this.$refs.video.play();
        // 显示暂停
        this.playIndex = index;
      } else {
        // 给video赋值
        this.$refs.video.src = 'http://localhost:3001/' + scope.mv_file;
        this.showMV = true;
        // 播放
        this.$refs.video.play();
        // 显示暂停
        this.playIndex = index;
      }
    },
    // 获取mv
    async getMVL () {
      let res = await getMVList();
      if (res.status === 0) {
        this.tableData = res.data;
        // 防止一上来第一个就显示暂停
        this.playIndex = this.tableData.length;
      } else {
        this.$message.error(res.message);
      }
    },
    // 添加mv
    addMv () {
      this.dialogFormVisibleAddMV = true;
      // 获取singer 为添加mv做准备
      this.getSingerL();
    },
    // 停止播放
    stopPlay () {
      // 正在播放
      if (this.playIndex !== this.tableData.length) {
        // 暂停播放
        this.$refs.video.pause();
        // 修改playIndex为获取到音乐时设置的值 即防止显示暂停
        this.playIndex = this.tableData.length;
      }
      this.showMV = false;
    },
    // mv播放完毕
    endedPlay () {
      // 修改playIndex为获取到时设置的值 即防止显示暂停
      this.playIndex = this.tableData.length;
    }
  }
}
</script>

<style lang="less" scoped>
  .avatar-uploader /deep/ .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  /deep/ .el-list-leave-active{
    transition: none;
  }
  .video{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 998;
    background-color: rgba(0, 0, 0, .6);
    span{
      position: absolute;
      right: 15px;
      top: 10px;
      color: #fff;
      z-index: 998;
      cursor: pointer;
      font-size: 24px;
      &:hover{
        color: skyblue;
      }
    }
    video{
      position: absolute;
      left: 50%;
      top: 50%;
      width: 650px;
      height: 400px;
      z-index: 1000;
      transform: translate(-50%,-50%);
    }
  }
</style>